<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jquery</title>
		<link rel="shortcut icon" href="img/jq_ico.ico" type="image/x-icon"/>
		<link rel="stylesheet" href="css/jquery.css"/>
		<link rel="stylesheet" href="css/reset.css"/>
		<script src="syntaxhighlighter/scripts/shCore.js"></script>
		<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJScript.js"></script>
		<link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shCoreDefault.css"/>
		<script type="text/javascript">SyntaxHighlighter.all();</script>
	</head>
	<body>
		<header class="page_head">
			<nav class="hn">
				<div class="head_nav clear">
					<ul class="nav_ico">
						<li class="ni_j"><a href=""></a></li>
						<li class="ni_br ni_ico2"><a href=""></a></li>
						<li class="ni_br ni_ico3"><a href=""></a></li>
						<li class="ni_br ni_ico4"><a href=""></a></li>
						<li class="ni_br ni_ico5"><a href=""></a></li>
					</ul>
					<ul class="nav_text">
						<li>
							<a href="">Plugins</a>
						</li>
						<li>
							<a href="">Contribute</a>
						</li>
						<li>
							<a href="">Events</a>
						</li>
						<li>
							<a href="">Support</a>
						</li>
						<li>
							<a href="">jQuery Foundation</a>
						</li>
					</ul>
				</div>
			</nav>
		</header>
		<section class="page_bg">
			<section class="content">
				<div class="logo_head clear">
					<h1>
						<a class="logo" href=""><img src="img/logo-jquery.png" alt="" /></a>
					</h1>
					<a class="ad" href=""><img src="img/adbg.png" alt="" /></a>
				</div>
				<nav class="ns">
					<div class="nav_search clear">
						<ul>
							<li><a href="">Download</a></li>
							<li><a href="">API Documentation</a></li>
							<li><a href="">Blog</a></li>
							<li><a href="">Plugins</a></li>
							<li><a href="">Browser Support</a></li>
						</ul>
						<select class="navdr">
							<option>Navigate...</option>
							<option value="#">Download</option>
							<option value="#">API Documentation</option>
							<option value="#">Blog</option>
							<option value="#">Plugins</option>
							<option value="#">Browser Support</option>
						</select>
						<div class="search_f">
							<form action="" method="post" class="search_b">
								<input type="text" placeholder=​search autocomplete=​"off" class="fi"/>
								<button type="submit" class="fb"></button>
							</form>
						</div>
					</div>
				</nav>	
				<div class="lccd_bg">
					<div class="lccd clear">
						<div class="lcc_d">
							<div class="dload clear">
								<a href="">
									<span class="dl_bg"></span>
									Download jQuery
									<span class="dl_tt">v1.11.3 or v2.1.4</span>
								</a>
							</div>
							<p class="vh_t"><a href="">View Source on GitHub →</a></p>
							<p class="vh_t"><a href="">How jQuery Works →</a></p>
						</div>
						<ul class="lcc">
							<li>
								<img src="img/li.png" alt="" />
								<h3>Lightweight Footprint</h3>
								<p>Only 32kB minified and gzipped. Can also be included as an AMD module</p>
							</li>
							<li>
								<img src="img/cs.png" alt="" />
								<h3>CSS3 Compliant</h3>
								<p>Supports CSS3 selectors to find elements as well as in style property manipulation</p>
							</li>
							<li>
								<img src="img/cr.png" alt="" />
								<h3>Cross-Browser</h3>
								<p><a class="lcc_un" href="">IE, Firefox, Safari, Opera, Chrome, and more</a></p>
							</li>
						</ul>
					</div>
				</div>
				<section class="con_w clear">
					<div class="cw_left">
						<h3>What is jQuery?</h3>
						<p>jQuery is a fast, small, and feature-rich JavaScript library. It makes
							things like HTML document traversal and manipulation, event handling,
							animation, and Ajax much simpler with an easy-to-use API that works across
							a multitude of browsers. With a combination of versatility and
							extensibility, jQuery has changed the way that millions of people write
							JavaScript.
						</p>
						<h3>Corporate Members</h3>
						<ul class="cems clear">
							<li class="ibm">
								<a href=""><img src="img/ibm.png" alt="" /></a>
							</li>
							<li class="fam">
								<a href=""><img src="img/fa.png" alt="" /></a>
							</li>
							<li class="neo">
								<a href=""><img src="img/neobu.png" alt="" /></a>
							</li>
							<li class="wor">
								<a href=""><img src="img/word.png" alt="" /></a>
							</li>
						</ul>
						<p>Support from our corporate members makes it possible for the jQuery
							Foundation to continue our work on our JavaScript libraries and pushing
							the open web forward with events and participation in the standards process.
							View our <a class="mp_te" href="">members page</a> for a full list of corporate and individual members.
						</p>
						<h3>Other jQuery Foundation Projects</h3>
						<ul class="ojfp clear">
							<li class="ujq">
								<a href=""><img src="img/jqu.png" alt="" /></a>
							</li>
							<li class="jq_m">
								<a href=""><img src="img/ujq_m.png" alt="" /></a>
							</li>
							<li class="qun">
								<a href=""><img src="img/qun.png" alt="" /></a>
							</li>
							<li class="si">
								<a href=""><img src="img/siz.png" alt="" /></a>
							</li>
						</ul>
					</div>
					<div class="cw_right">
						<h3>Resources</h3>
						<ul>
							<li class="clear"><a href="">jQuery Core API Documentation</a></li>
							<li class="clear"><a href="">jQuery Learning Center</a></li>
							<li class="clear"><a href="">jQuery Blog</a></li>
							<li class="clear"><a href="">Contribute to jQuery</a></li>
							<li class="clear"><a href="">About the jQuery Foundation</a></li>
							<li class="clear"><a href="">Browse or Submit jQuery Bugs</a></li>
							<li class="tryj clear"><a href=""><img src="img/tryj.png" alt="" /></a></li>
						</ul>
					</div>
				</section>
				<section class="s_pre clear">
					<h2>A Brief Look</h2>
					<h3>DOM Traversal and Manipulation</h3>
					<p>Get the <mark>< button ></mark> element with the class 'continue' and change its HTML to 'Next Step...'</p>
					<pre class="brush: js;">
					$( "button.continue" ).html( "Next Step..." )</pre>
					<h3>Event Handling</h3>
					<p>Show the <mark>#banner-message</mark> element that is hidden with  <mark>display:none</mark> in its CSS when any button in <mark>#button-container</mark> is clicked.</p>
					<pre class="brush: js;">
					$.ajax({
						url: "/api/getWeather",
						data: {
						    zipcode: 97201
						},
						success: function( data ) {
						    $( "#weather-temp" ).html( "<strong>" + data + "</strong> degrees" );
						}
					});</pre>
					<h3>Ajax</h3>
					<p>Call a local script on the server <mark>/api/getWeather</mark> with the query parameter <mark>zipcode=97201</mark> and replace the element <mark>#weather-temp's</mark> html with the returned text.</p>
					<pre class="brush: js;">
					$.ajax({
					  url: "/api/getWeather",
					  data: {
					    zipcode: 97201
					  },
					  success: function( data ) {
					    $( "#weather-temp" ).html( "<strong>" + data + "</strong> degrees" );
					  }
					});</pre>
				</section>
			</section>
		</section>
		<section class="foot_bg">
			<footer>
				<div class="head_b clear">
					<h3>BOOKS</h3>
					<span></span>
				</div>
				<ul class="books clear">
					<li>
						<a href="">
							<img src="img/foot/lj.png" alt="" />
							<span class="bt_t">Learning jQuery Fourth Edition</span>
							<span class="bt_b">Karl Swedberg and Jonathan Chaffer</span>
						</a>
					</li>
					<li>
						<a href="">
							<img src="img/foot/meap.png" alt="" />
							<span class="bt_t">jQuery in Action</span>
							<span class="bt_b">Bear Bibeault, Yehuda Katz, and Aurelio De Rosa</span>
						</a>
					</li>
					<li>
						<a href="">
							<img src="img/foot/jq_mm.png" alt="" />
							<span class="bt_t">jQuery Succinctly</span>
							<span class="bt_b">Cody Lindley</span>
						</a>
					</li>
				</ul>
				<div class="relation clear">
					<ul class="lea clear">
						<li><a class="lc_bg" href="">Learning Center</a></li>
						<li><a class="f_bg" href="">Forum</a></li>
						<li><a class="a_bg" href="">API</a></li>
						<li><a class="t_bg" href="">Twitter</a></li>
						<li><a class="i_bg" href="">ICR</a></li>
						<li><a class="g_bg" href="">GitHub</a></li>
					</ul>
					<div class="rel_left">
						<p class="clear">
							Copyright 2015<a href="">The jQuery Foundation</a><a href="">jQuery License</a>
						</p>
						<p class="re_mar clear">
							<a class="web_bg" href="">Web hosting by Media Temple</a>
							<a class="cdn_bg" href="">CDN by MaxCDN</a>
							<a class="pow_bg" href="">Powered by WordPress</a>
						</p>
						<p class="clear">
							Thanks: 
							<a href="">Members</a><a href="">Sponsors</a>
						</p>
					</div>
				</div>
			</footer>
		</section>
	</body>
</html>
